<template>
	<view class="j_cont">
		<!-- 订单主体 -->
		<view class="j_item">
			<!-- left 图片 -->
			<view class="j_image">
				<img src="http://127.0.0.1:7001/public/user/41245.png" alt="">
			</view>
			<!-- right 详细信息 -->
			<view class="j_detailed">
				<!-- top -->
				<view class="j_detop">
					<text>潘祥记玫瑰鲜花饼</text>
					<text class="j_Deliver">正在配送</text>
				</view>
				<!-- cont -->
				<view class="j_Price">
					<text>$20.0</text>
					<view class="j_ping">
						<text>评论得积分</text>
					</view>
				</view>
				<!-- bottom -->
				<view class="j_bottom">
					<text>送达时间</text>
					<text>2016-12-11</text>
					<text>17:00</text>
				</view>
			</view>
		</view>
		<u-line color="info" />
		<view class="j_item">
			<!-- left 图片 -->
			<view class="j_image">
				<img src="http://127.0.0.1:7001/public/user/41245.png" alt="">
			</view>
			<!-- right 详细信息 -->
			<view class="j_detailed">
				<!-- top -->
				<view class="j_detop">
					<text>潘祥记玫瑰鲜花饼</text>
					<text class="j_Deliver">配送完成</text>
				</view>
				<!-- cont -->
				<view class="j_Price">
					<text>$20.0</text>
					<view class="j_pings" @click="discuss">
						<text>评论得积分</text>
					</view>
				</view>
				<!-- bottom -->
				<view class="j_bottom">
					<text>送达时间</text>
					<text>2016-12-11</text>
					<text>17:00</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			discuss(){
				uni.navigateTo({
					url:`/pages/person/myOrder/discuss/discuss`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	//主体
	.j_cont {
		width: 100%;
		height: 94vh;
		background: #F2F2F2;
		padding-top: 40upx;
	}

	.j_item {
		width: 100%;
		height: 190upx;
		background: white;
		padding: 10upx 20upx;
		box-sizing: border-box;
		display: flex;

		//img图片
		.j_image {
			width: 40%;
			height: 100%;
			background: salmon;
			margin-right: 20upx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		//内容
		.j_detailed {
			width: 100%;
			height: 100%;

			//top
			.j_detop {
				width: 100%;
				height: 50upx;
				display: flex;
				justify-content: space-between;
				line-height: 50upx;

				.j_Deliver {
					color: #00B8FE;
					margin-right: 40upx;
				}
			}
			//cont
			.j_Price{
				width: 100%;
				height: 50upx;
				display: flex;
				justify-content: space-between;
				margin-top: 10upx;
				margin-bottom: 10upx;
				.j_ping{
					width: 180upx;
					height: 50upx;
					background: #999999;
					border-radius: 10upx;
					text-align: center;
					line-height: 50upx;
					color: white;
					font-size: 20upx;
				}
				.j_pings{
					width: 180upx;
					height: 50upx;
					background: #FAAB34;
					border-radius: 10upx;
					text-align: center;
					line-height: 50upx;
					color: white;
					font-size: 20upx;
				}
			}
			
			//bottom
			.j_bottom{
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: 20upx;
				text{
					margin-right: 20upx;
				}
			}
		}
	}
</style>
